<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 客户列表</title>
    <link rel="shortcut icon" href="../content/static/img/favicon.ico">
    <link href="../content/css/common_modal.css" rel="stylesheet">
    <link href="../content/static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="../content/js/lib/vue/select2.min.css" rel="stylesheet">
    <link href="../content/static/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="../content/static/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../content/static/css/plugins/chosen/chosen.css" rel="stylesheet">
    <link href="../content/js/lib/calendar/calendar.css" rel="stylesheet">
    <link href="../content/js/lib/calendar/scrollbar.css" rel="stylesheet">
    <link href="../content/static/css/style.min.css?v=4.0.0" rel="stylesheet">
    <style>
        table-th{
            font-size: 12px;
            font-family: tahoma, "Microsoft YaHei", "Hiragino Sans GB", Arial, sans-serif;
            line-height: 1.42857143;
            color: #333;
            background-color: #f5f5f5;
        }
        table tr{ height:40px;}
        #productTree {
            width: 320px;
            max-height: 376px;
            min-height: 32px;
            overflow-y: auto;
            padding: 10px 10px 0;
        }
        .projectTreeWrap {
            top:148px !important
        }
        .checkbox label, .radio label{
            padding-left: 15px;
        }.search{
            float: left;padding: 0px 10px 0px 0px;
        }
       .tooltip-inner{
        max-width: 650px;
        text-align: left;
       }
    </style>
</head>

<body class="content-container">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <ol class="breadcrumb">
                        <li><a>洽谈列表</a></li>
                    </ol>
                </div>
                <div class="content-wrapper">
                    <div class="search-condition">
                        <div>
                            <div class="filter-wrapper">
                                <ul class="clearfix">
                                    <li class="filter-item ">
                                        <label>公司名称</label>
                                        <div>
                                            <div class="fill-wrapper">
                                                <input id="serialNumber" type="text" class="fill-item">
                                            </div>
                                        </div>
                                    </li>
                                    <li class="filter-item ">
                                        <label>状态</label>
                                        <div>
                                            <select v-select2 id="warehouse">
                                                <option value='0'>全部</option>
                                                <option v-for="item in statusList" v-bind:value="item.Value"
                                                    v-bind:selected="$index===0" v-text="item.Text"></option>
                                            </select>
                                        </div>
                                    </li>
                                    <li class="filter-item">
                                        <a class="revision-btn revision-btn-search" v-on:click="searchData(1)">搜索</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <table class="table table-hover table-bordered">
                        <thead style="background: #f5f5f5;">
                            <tr>
                                <th>序号</th>
                                <th>姓名</th>
                                <th>手机号码</th>
                                <th>公司名称</th>
                                <th>地址</th>
                                <th>客户洽谈内容</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>洽谈结果备注</th>
                                <th style="width: 180px;">操作</th>
                            </tr>
                        </thead>

                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>张三</td>
                            <td>111111</td>
                            <td>张三的公司</td>
                            <td>北京市xxx</td>
                            <td>我有很多牛肉</td>
                            <td>待洽谈</td>
                            <td>2019-09-01</td>
                            <td></td>
                            <td>
                                <a href="javascript:;" v-on:click="detailShow(1)">洽谈</a>
                                <a href="javascript:;" v-on:click="delete(3)">删除</a>
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>张三</td>
                            <td>111111</td>
                            <td>张三的公司</td>
                            <td>北京市xxx</td>
                            <td>我有很多苹果</td>
                            <td class="text-navy">通过</td>
                            <td>2019-09-01</td>
                            <td>客户靠谱</td>
                            <td>
                                <a href="javascript:;" v-on:click="detailShow(1)">洽谈</a>
                                <a href="javascript:;" v-on:click="delete(3)">删除</a>
                            </td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>张三</td>
                            <td>111111</td>
                            <td>张三的公司</td>
                            <td>北京市xxx</td>
                            <td>我有很多香蕉</td>
                            <td class="text-danger">未过</td>
                            <td>2019-09-01</td>
                            <td>客户不靠谱</td>
                            <td>
                                <a href="javascript:;" v-on:click="detailShow(1)">洽谈</a>
                                <a href="javascript:;" v-on:click="delete(3)">删除</a>
                            </td>
                        </tr>
                        </tbody>
                        <tfoot v-show="!result.List.length" style="display:none;">
                            <tr v-show="listLoading">
                                <td colspan="11">
                                    <p class="f-loading" style="height:160px;"></p>
                                </td>
                            </tr>
                            <tr style="display: none;" v-else>
                                <td colspan="11">
                                    <p class="no-result">未查询到相关数据，请尝试更换筛选条件后查询!</p>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                    <div class="clearfix page-wrap">
                        <paginationbetter v-bind:data-total="pageObj.dataTotal" v-bind:page-number.sync="pageObj.pageNumber"
                            v-bind:page-size="pageObj.pageSize" v-bind:data-number.sync="pageObj.dataNumber"
                            v-bind:ajax-obj="pageObj.ajaxObj"></paginationbetter>
                    </div>
                </div>
            </div>
            <div style="display: none;" v-show="pageInit">
                <!-- 新增/修改客户 -->
                <modal v-bind:show.sync="addModal.show" v-bind:style="addModal .style" v-bind:add-class="addModal.addClass">
                    <h4 slot="header" v-text="edit.id==undefined?'新增客户':'编辑客户'">
                        <span class="title-tips">创建日期：<span v-text="edit.createdDate"></span></span>
                        <span class="title-tips">创建人：<span v-text="edit.createAuthor"></span></span>
                    </h4>
                    <div slot="body" class="clearfix">
                        <form class="form-horizontal m-t" novalidate="novalidate">
                            <h3 class="panel-title">基本信息</h3>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">姓名</label>
                                <div class="col-sm-4">
                                    <input name="firstname" class="form-control" type="text" v-model="edit.customerName">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">联系电话</label>
                                <div class="col-sm-4">
                                    <input name="lastname" class="form-control" type="text" v-model="edit.mobile">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">客户类型</label>
                                <div class="col-sm-4">
                                    <select id="customer_type" v-model="edit.customerType">
                                        <option v-for="item in typeList" v-bind:value="item.Value" v-bind:selected="$index===0"
                                            v-text="item.Text"></option>
                                    </select>
                                </div>
                            </div>
                            <div>
                                <h3 class="panel-title">其他信息</h3>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 control-label">备注</label>
                                <div class="col-sm-10">
                                    <textarea id="ccomment" name="comment" class="form-control" style="height: 65px;"
                                        v-model="edit.remarkInfo"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div slot="footer" style="text-align:center">
                        <a href="javascript:;" class="revision-btn" v-on:click="submit()"> 保存</a>
                        <a href="javascript:;" class="revision-btn-default" v-on:click="this.addModal.close()"> 取消</a>
                    </div>
                </modal>
                <!-- 客户详情 -->
                <modal v-bind:show.sync="detailModal.show" v-bind:style="detailModal .style" v-bind:add-class="detailModal.addClass">
                    <h4 slot="header">洽谈</h4>
                    <div slot="body" class="clearfix">
                        <div>
                            <h3 class="panel-title">基本信息</h3>
                        </div>
                        <ul class="bill-tips clearfix">
                            <li class="w-100">
                                <em>姓名</em>
                                <span>张三</span>
                            </li>
                            <li class="w-100">
                                <em>公司名称</em>
                                <span>张三的公司</span>
                            </li>
                            <li class="w-100">
                                <em>时间</em>
                                <span>2019-09-01 12:00</span>
                            </li>
                            <li class="w-100">
                                <em>客户侧消息</em>
                                <span>我有很多牛肉啊</span>
                            </li>
                        </ul>
                        <div>
                            <h3 class="panel-title">洽谈审批</h3>
                        </div>
                        <div class="form-group">
                        <div class="col-sm-4">
                            <label class="radio-inline">
                                <input type="radio" checked="" value="option1" id="optionsRadios1" name="optionsRadios">洽谈通过</label>
                            <label class="radio-inline">
                                <input type="radio" value="option2" id="optionsRadios2" name="optionsRadios">洽谈未通过</label>
                        </div>
                        </div>
                        <div>
                            <h3 class="panel-title">洽谈结果备注</h3>
                        </div>
                        <div class="form-group">
                        <textarea id="comment" name="comment" class="form-control"
                                  style="height: 34px;"></textarea>
                        </div>

                    </div>
                </modal>
                <!-- 提示框 -->
                <modal v-ref:confirm v-bind:show.sync="confirm.show" v-bind:style="confirm.styleMin"
                    v-bind:before-close="confirm.beforeClose" v-bind:init="confirm.init" class="tips-modal">
                    <h4 slot="header">确认</h4>
                    <div slot="body">
                        <div id="confirmInvoiceTxt" v-html="confirm.Msg||''"></div>
                    </div>
                    <div slot="footer">
                        <a class="revision-btn width80" href="javascript:;" v-on:click="confirm.callBack($event)">通过</a>
                        <a class="revision-btn-default width80" href="javascript:;" v-on:click="confirm.cancelcallBack">取消</a>
                    </div>
                </modal>
                <!-- alert -->
                <modal class="tips-modal" v-ref:alert v-bind:show.sync="alert.show" v-bind:style="alert.styleMin" v-bind:before-close="alert.beforeClose" v-bind:init="alert.init" v-bind:inner-scroll="alertObj.innerScroll">
                    <h4 slot="header">提示信息</h4>
                    <div slot="body">
                        <div id="confirmInvoiceTxt" v-html="alert.Msg||''"></div>
                    </div>
                    <div slot="footer">
                        <a class="revision-btn" href="javascript:;" v-on:click="alert.func">确定</a>
                    </div>
                </modal>
            </div>
        </div>
    </div>
    <script src="../content/js/lib/vue/vue.min.js"></script>
    <script src="../content/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="../content/static/js/bootstrap.min.js?v=3.3.5"></script>
    <script src="../content/static/js/plugins/chosen/chosen.jquery.js"></script>
    <script src="../content/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../content/static/js/content.min.js?v=1.0.0"></script>
    <script src="../content/js/lib/calendar/calendar.js"></script>
    <script src="../content/js/lib/calendar/scrollbar.js"></script>
    <script src="../content/js/lib/vue/vue-modal.js"></script>
    <script src="../content/js/lib/vue/vue-paginationbetter.js"></script>
    <script src="../content/js/common.js"></script>
    <script src="../content/js/lib/vue/select2.js"></script>
    <script type="text/javascript">
        $("#warehouse").select2({
            width: "220px"
        });
        $("#status").select2({
            width: "220px"
        });
        $("#approveStatus").select2({
            width: "220px"
        });
        var vmData = {
            approvalModal: {
                show: false,
                style: {
                    width: '560px',
                    height: "auto"
                },
                addClass: 'scroll-modal',
                func: {
                    type: Function
                },
                close: function () {
                    vm.approvalModal.show = false;
                }
            },
            relevanceModal: {
                show: false,
                style: {
                    width: '980px',
                    height: "auto"
                },
                addClass: 'scroll-modal',
                func: {
                    type: Function
                },
                close: function () {
                    vm.detailModal.show = false;
                }
            },
            borrowDetailModal: {
                show: false,
                style: {
                    width: '980px',
                    height: "auto"
                },
                addClass: 'scroll-modal',
                func: {
                    type: Function
                },
                close: function () {
                    vm.borrowDetailModal.show = false;
                }
            },
            detailModal: {
                show: false,
                style: {
                    width: '980px',
                    height: "auto"
                },
                addClass: 'scroll-modal',
                beforeClose: function () {}
            },
            addModal: {
                show: false,
                style: {
                    width: '680px',
                    height: "auto"
                },
                addClass: 'scroll-modal',
                func: {
                    type: Function
                },
                close: function () {
                    vm.addModal.show = false;
                }
            },
            productSelectModal: {
                show: false,
                style: {
                    width: '980px',
                    height: "auto"
                },
                addClass: 'scroll-modal',
                func: {
                    type: Function
                },
                close: function () {
                    vm.productSelectModal.show = false;
                }
            },
            modelTitle: "",
            customerList: [{
                    "Text": "普通客户",
                    "Value": "0",
                },
                {
                    "Text": "一级客户",
                    "Value": "1",
                },
                {
                    "Text": "二级客户",
                    "Value": "2",
                },
                {
                    "Text": "三级客户",
                    "Value": "3",
                },
                {
                    "Text": "四级客户",
                    "Value": "4",
                }
            ],
            backStatusList: [{
                    "Text": "全部",
                    "Value": "553",
                },
                {
                    "Text": "未归还",
                    "Value": "360",
                }, {
                    "Text": "已归还",
                    "Value": "365",
                },
                {
                    "Text": "转销售",
                    "Value": "4105",
                }
            ],
            statusList: [{
                    "Text": "已洽谈",
                    "Value": "553",
                },
                {
                    "Text": "待洽谈",
                    "Value": "360",
                }
            ],
            modelFlag: 0,
            selectProductItem: [],
            productListSelect: [{
                    "checked": false,
                    "Id": "1",
                    "productCode": "SP20150717002",
                    "productName": "三角阀",
                    "spec": "桶",
                    "prope": "通用型",
                    "stockCount": "12",
                    "price": "12",
                    "remark": "",
                    "img": "../content/static/img/no_pic.png"
                },
                {
                    "checked": false,
                    "Id": "2",
                    "productCode": "SP20150717002",
                    "productName": "劲霸皮革清洗剂",
                    "spec": "桶",
                    "prope": "5L",
                    "stockCount": "1",
                    "inventoryCount": "1",
                    "remark": "",
                    "barCode": "",
                    "img": "../content/static/img/no_pic.png"
                }, {
                    "checked": false,
                    "Id": "3",
                    "productCode": "SP20150717002",
                    "productName": "快卫内饰清洗剂",
                    "spec": "瓶",
                    "prope": "500ML",
                    "stockCount": "52",
                    "price": "52",
                    "remark": "",
                    "img": "../content/static/img/no_pic.png"
                }, {
                    "checked": false,
                    "Id": "4",
                    "productCode": "SP20150717002",
                    "productName": "漆面至尊镀晶大套装",
                    "spec": "套",
                    "prope": "",
                    "stockCount": "14",
                    "price": "15",
                    "remark": "",
                    "img": "../content/static/img/no_pic.png"
                }
            ],
            productChooseList: [],
            accountList: [{
                "Text": "中国银行",
                "Value": "1",
            }, {
                "Text": "建设银行",
                "Value": "2",
            }, {
                "Text": "农业银行",
                "Value": "3",
            }, {
                "Text": "工商银行",
                "Value": "4",
            }, {
                "Text": "现金",
                "Value": "5",
            }, ],
            productChooseList: [],
            typeList: [{
                "Text": "已洽谈",
                "Value": "1",
            }, {
                "Text": "待洽谈",
                "Value": "2",
            }
            ],
            flag: false,
            deleteConfirm: {
                show: false,
                style: {
                    width: '400px'
                }
            },
        };
        vmData = $.extend(vmData, baseData);
        var vmMothod = {
            init: function () {
                vm.$set('PageSearch', vm.searchData);
                vm.searchData();
            },
            //详情
            detailShow: function (obj) {
                vm.detailModal.show = true;
                // let ajaxParam = {
                //     url: "customer/detail/" + obj
                // };
                // this.RequestGetAajx(ajaxParam, function (e) {
                //     if (e.status == 200 && e.data) {
                //         vm.$set('detail', e.data.customer);
                //     }
                // });
            },
            //新增
            addShow: function (obj) {
                vm.addModal.show = false;
                //修改
                if (obj != undefined) {
                    let ajaxParam = {
                        url: "customer/detail/" + obj
                    };
                    this.RequestGetAajx(ajaxParam, function (e) {
                        if (e.status == 200 && e.data) {
                            vm.$set('edit', e.data.customer);
                        }
                    });
                } else {
                    vm.$set('edit', {});

                }
                vm.$nextTick(function () {
                    $("#customer_status").select2({
                        width: "133px"
                    }).trigger('change');
                    $("#customer_type").select2({
                        width: "190px"
                    }).trigger('change');
                    $("#customer_level").select2({
                        width: "133px"
                    }).trigger('change');
                    $("#supplier").select2({
                        width: "133px"
                    }).trigger('change');
                    $("#customer_type").on("select2:select", function () {
                        var data = $(this).val();
                        if (data == "2") {
                            vm.$set("flag", true);
                        } else {
                            vm.$set("flag", false);
                        }
                    });
                });
            },
            //查询
            searchData: function (flag) {
                if (flag === 1) {
                    vm.$set("pageObj.pageNumber", 1);
                }
                let url = 'customer/list';
                var sendData = {
                    //phoneNo:"1",
                };
                vm.PageAajx(url, sendData);
            },
            //删除
            delete: function (obj) {
                vm.Confirm('确认删除当前客户？', function () {
                    var param={
                        _method:'delete'
                    }
                    let ajaxParam = {
                        url: "customer/delete/"+obj,
                        param:param
                    };
                    vm.RequestDeleteAjax(ajaxParam, function (e) {
                        if (e.status == 200) {
                            vm.searchData();
                        }
                    });
                });
            },
            // 审批
            approval: function (num) {
                let ajaxParam = {
                    url: "customer/approval/" + num
                };
                this.RequestGetAajx(ajaxParam, function (e) {
                    if (e.status == 200) {
                        vm.$set('detail', e.data.customer);
                    }
                });
            },
            //提交
            submit: function () {
                if (vm.validateAndFormat()) return false;
                let param = vm.edit;
                param.customerLevel = $("#customer_level").val();
                param.customerRank = $("#customer_level").val();
                param.customerType = $("#customer_type").val();
                param.status = $("#customer_status").val();
                vm.Confirm('确认提交？', function () {
                    let ajaxParam = {
                        url: "customer/insert/",
                        param: param
                    };
                    vm.RequestPostAajx(ajaxParam, function (e) {
                        debugger;
                        if (e.status == 200) {
                            vm.addModal.show=false;
                            vm.searchData();
                        }
                        else{
                            vm.Alert("保存失败，请联系管理员！");
                            return false;
                        }
                    });
                });
            },
            validateAndFormat: function () {
                if (vm.edit.customerName == '' || vm.edit.customerName == undefined) {
                    vm.Alert("请填写客户姓名！");
                    return false;
                }
                // if (vm.edit.contactUser == '' || vm.edit.contactUser == undefined) {
                //     vm.Alert("请填写联系人！");
                //     return false;
                // }
                if (vm.edit.mobile == '' || vm.edit.mobile == undefined) {
                    vm.Alert("请填写手机号！");
                    return false;
                }
                if ($("#customer_type").val() == '' || $("#customer_type").val() == "-1") {
                    vm.Alert("请选择客户类型！");
                    return false;
                }
            },
        };
        vmMothod = $.extend(vmMothod, baseCommonFunction);
        var vm = new Vue({
            el: '.content-container',
            data: vmData,
            methods: vmMothod
        });
        vm.init();
    </script>
</body>

</html>
